﻿
@{
    ViewData["Title"] = "Index";
}
@section Styles{
    <style>
        hr {
            border-color: #F1EAE0;
            margin-top: 20px;
            margin-bottom: 20px;
            border: 0;
            border-top: 1px solid #eee;
            height: 0;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }

        img {
            vertical-align: middle;
        }

        .card {
            border-radius: 6px;
            box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
            background-color: #FFFFFF;
            color: #252422;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
            width: 33%;
            margin-left: auto;
            margin-right: auto;
            margin-right: auto;
        }

            .card .author {
                font-size: 12px;
                font-weight: 600;
                text-transform: uppercase;
            }

        .card-user .image img {
            width: 100%;
        }

        .card .image {
            width: 100%;
            overflow: hidden;
            height: 260px;
            border-radius: 6px 6px 0 0;
            position: relative;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .card-user .image {
            width: 100%;
            border-radius: 8px 8px 0 0;
            height: 150px;
            position: relative;
            overflow: hidden;
        }

        .card-user .content {
            min-height: 200px;
        }

        .card .content {
            padding: 15px 15px 10px 15px;
        }

        .card-user hr, .card-price hr {
            margin: 5px 15px;
        }

        .card-user .author {
            text-align: center;
            text-transform: none;
            margin-top: -65px;
        }

        .card-user .avatar.border-white {
            border: 5px solid #FFFFFF;
        }

        .card .avatar {
            width: 50px;
            height: 50px;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 5px;
        }

        .card-user .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: relative;
            margin-bottom: 15px;
        }

        .card-user .author .title {
            color: #403D39;
            font-weight: 600;
            font-size: 1.5em;
            line-height: 24px;
        }

        .card-user .description {
            margin-top: 10px;
            font-size: 16px;
            color: #66615b;
        }

        .text-center {
            text-align: center;
        }
        p {
            font-size: 16px;
            line-height: 1.4em;
        }
        .ivu-row {
            padding: 10px 10px 10px 20px;
        }
        .ivu-input-wrapper{
            width:98%;
        }
    </style>
}
<div class="card card-user">
    <div class="image">
        <img src="~/images/background.jpg" alt="...">
    </div>
    <div class="content">
        <div class="author">
            <img class="avatar border-white" src="~/images/face-2.jpg" alt="...">
            <h4 class="title">
                系统管理员
            </h4>
        </div>
        <p class="description text-center">
            只要你们行道，不要单单听道，<br>
            自已欺哄自己。<br>
            (雅各书1:22)
        </p>
    </div>
    <hr>
    <div class="text-center">
        <row>
            <i-col span="10">
                <i-input type="password" v-model="user.oldSecret" placeholder="旧密码..."></i-input>
            </i-col>
            <i-col span="10">
                <i-input type="password" v-model="user.secret" placeholder="新密码..."></i-input>
            </i-col>
            <i-col span="4">
                <i-button type="primary" @@click="onSave">保存</i-button>
            </i-col>
        </row>
    </div>
</div>

@section Scripts
{
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                user: { userId: 0, oldSecret: '', secret: '' }
            },
            mounted: function () {
                this.get();
            },
            methods: {
                get() {
                    axios.get('/Admin/User/GetUser')
                        .then(function (response) {
                            app.user = response.data;
                        })
                        .catch(function (err) {
                            app.$Message.error(err);
                        });
                },
                onSave() {
                    if (!this.user.oldSecret || !this.user.secret) {
                        this.$Notice.warning({
                            title: '信息不完整',
                            desc: '旧密码和新密码都必须填写'
                        });
                    } else {
                        axios.post('/Admin/User/Update', this.user)
                            .then(function (response) {
                                if (!response.data.succeeded) {
                                    app.$Message.error(response.data.errors[0].description);
                                } else {
                                    app.$Message.success('操作成功');
                                }
                            })
                            .catch(function (err) {
                                app.$Message.error(err);
                            });
                    }
                }
            }
        });
    </script>
}